<template>
  <div class="coupon">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: couponType === row.type }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
      <el-row type="flex" slot="right">
        <el-input
          placeholder="输入实体卡卡号"
          size="mini"
          v-model="exchangeVal"
          class="input-exchange"
        >
          <template slot="append">
            <el-button size="mini" @click="handleCouponExchange">兑换</el-button>
          </template>
        </el-input>
      </el-row>
    </my-tabs>
    <template v-if="$util.isDef(couponList)">
      <el-row :gutter="30" class="coupon-list" v-if="couponList.length">
        <el-col :span="8" v-for="(item, index) in couponList" :key="index">
          <!-- 可用 -->
          <template v-if="couponType == 'usable'">
            <!-- 满减 -->
            <el-row type="flex" class="item" :class="couponStatusClass[item.coupon_type]">
              <el-row
                type="flex"
                align="middle"
                justify="center"
                class="left"
                v-if="item.coupon_type == 1"
              >
                <span class="card-name">{{ item.price | formatMoney }}</span>
                <span class="card-desc">满{{ item.maxprice | floatCount }}使用</span>
              </el-row>
              <!-- 打折卡 -->
              <el-row
                type="flex"
                align="middle"
                justify="center"
                class="left"
                v-else-if="item.coupon_type == 2"
              >
                <span class="card-name">{{ item.discount | floatCount }}折</span>
                <span class="card-desc">满{{ item.maxprice | floatCount }}使用</span>
              </el-row>
              <!-- 课程卡 -->
              <el-row
                type="flex"
                align="middle"
                justify="center"
                class="left"
                v-else-if="item.coupon_type == 3"
              >
                <span class="card-name">课程卡</span>
              </el-row>
              <div class="right">
                <div class="card-number">卡券编号：{{ item.code }}</div>
                <div class="school-name" v-if="item.coupon_type == 1 || item.coupon_type == 2">
                  仅限{{ item.school_name }}使用
                </div>
                <div class="school-name" v-else-if="item.coupon_type == 3">
                  仅限{{ item.course_title }}使用
                </div>
                <el-row type="flex" align="middle" justify="space-between">
                  <span class="end-time" v-if="item.use_etime == -1">永久有效</span>
                  <span class="end-time" v-else>{{ item.use_etime | formatExpireDay(true) }}</span>
                  <span class="btn" @click="handleUse(item)">去使用</span>
                </el-row>
              </div>
            </el-row>
          </template>
          <!-- 已过期/已使用 -->
          <template v-else-if="couponType == 'used' || couponType == 'expired'">
            <el-row type="flex" class="item overdue">
              <el-row type="flex" align="middle" justify="center" class="left">
                <!-- 满减 -->
                <template v-if="item.coupon_type == 1">
                  <span class="card-name">{{ item.price | formatMoney }}</span>
                  <span class="card-desc">满{{ item.maxprice | floatCount }}使用</span>
                </template>
                <!-- 打折卡 -->
                <template v-else-if="item.coupon_type == 2">
                  <span class="card-name">{{ item.discount | floatCount }}折</span>
                  <span class="card-desc">满{{ item.maxprice | floatCount }}使用</span>
                </template>
                <!-- 课程卡 -->
                <template v-else-if="item.coupon_type == 3">
                  <span class="card-name">课程卡</span>
                </template>
              </el-row>
              <div class="right">
                <div class="card-number">卡券编号：{{ item.code }}</div>
                <div class="school-name" v-if="item.coupon_type == 1 || item.coupon_type == 2">
                  仅限{{ item.school_name }}使用
                </div>
                <div class="school-name" v-else-if="item.coupon_type == 3">
                  仅限{{ item.course_title }}使用
                </div>
              </div>
              <edu-image
                v-if="couponType == 'expired'"
                :src="require('@/assets/images/public/yiguoqi.png')"
                class="seal"
              ></edu-image>
              <edu-image
                v-else-if="couponType == 'used'"
                :src="require('@/assets/images/public/yishiyong_icon.png')"
                class="seal"
              ></edu-image>
            </el-row>
          </template>
        </el-col>
      </el-row>
      <edu-no-data v-else></edu-no-data>
      <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
    </template>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduPagination from '@/components/EduPagination'
import EduNoData from '@/components/EduNoData'
export default {
  components: {
    MyTabs,
    EduPagination,
    EduNoData
  },
  inject: ['reload'],
  data() {
    return {
      tabList: [
        {
          type: 'usable',
          title: '可使用'
        },
        {
          type: 'used',
          title: '已使用'
        },
        {
          type: 'expired',
          title: '已过期'
        }
      ],
      couponList: null,
      couponType: 'usable',
      exchangeVal: '',
      couponStatusClass: { 1: 'reduce', 2: 'discount', 3: 'course-card' }
    }
  },
  mounted() {
    this.handleCouponInfo()
  },
  methods: {
    // 分页
    handleCurrentChange() {
      this.handleCouponInfo()
    },
    // 获取列表
    handleCouponInfo() {
      this.$api.getCoupon(
        this.couponType,
        {
          page: this.$store.getters['paginate/page'],
          count: 30
        },
        res => {
          this.couponList = res.data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 30,
            total: res.data.total
          })
        }
      )
    },
    // 兑换
    handleCouponExchange() {
      var re = /^[0-9a-zA-Z]*$/ // 数字或字母
      if (this.exchangeVal == '' || !re.test(this.exchangeVal)) {
        this.$message.error('请输入正确的实体卡卡号')
      } else {
        this.$api.createCouponExchange(
          {
            code: this.exchangeVal
          },
          res => {
            this.$message.success(res.msg)
            this.handleCouponInfo() // 刷新数据
            this.exchangeVal = ''
          },
          err => {
            this.$message.error(err.msg)
          }
        )
      }
    },
    // 使用卡卷
    handleUse(item) {
      if (item.coupon_type == 1 || item.coupon_type == 2) {
        window.open(`${item.mhm_sdn}?id=${item.mhm_id}`, '_blank')
      } else if (item.coupon_type == 3) {
        this.$messageBox
          .confirm(
            `是否使用课程卡兑换该课程<div class="coupon-use">${item.course_title}</div>`,
            '',
            {
              dangerouslyUseHTMLString: true,
              confirmButtonText: '兑换',
              cancelButtonText: '取消',
              center: true,
              showClose: true,
              type: ''
            }
          )
          .then(() => {
            this.$api.getCouponCourseExchange(
              {
                id: item.id
              },
              res => {
                this.$message.success(res.msg, res => {
                  this.reload()
                })
              },
              err => {
                this.$message.error(err.msg)
              }
            )
          })
          .catch(() => {})
      }
    },
    handleClickMenu(data) {
      this.couponType = data.type
      this.$store.dispatch('paginate/setPaginate', {
        currentPage: 1
      })
      this.handleCouponInfo()
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>
<style lang="scss">
.coupon-use {
  @include edu-color-auxiliary;
}
</style>
<style lang="scss" scoped>
.input-exchange {
  ::v-deep .el-input-group__append {
    color: #fff;
    @include edu-color-primary(background-color);
    @include edu-color-primary(border-color);
  }
}
.coupon {
  .coupon-list {
    .item {
      margin-top: 20px;
      height: 92px;
      box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      overflow: hidden;
      .left {
        width: 80px;
        color: #fff;
        flex-direction: column;
        .card-name {
          font-size: 18px;
        }
        .card-desc {
          margin-top: 15px;
          font-size: 12px;
        }
      }
      .right {
        flex: 1;
        padding: 12px;
        font-size: 12px;
        .card-number {
          width: 165px;
          color: $text-color-import;
          margin-bottom: 8px;
          @include ellipsis();
        }
        .school-name {
          color: $text-color-auxiliary;
          margin-bottom: 13px;
          @include ellipsisLine(1);
        }
        .end-time {
          color: $text-color-import;
        }
        .btn {
          color: #fff;
          padding: 3.5px 7px;
          border-radius: 10px;
          cursor: pointer;
        }
      }
      // 满减
      &.reduce {
        .left {
          background-color: #ff7970;
        }
        .right {
          .btn {
            background-color: #ff7970;
          }
        }
      }
      // 打折
      &.discount {
        .left {
          background-color: #ffb564;
        }
        .right {
          .btn {
            background-color: #ffb564;
          }
        }
      }
      // 课程卡
      &.course-card {
        .left {
          background-color: #67c23a;
        }
        .right {
          .btn {
            background-color: #67c23a;
          }
        }
      }
      // 过期/不能使用
      &.overdue {
        position: relative;
        .left {
          background-color: #dcdfe6;
        }
        .right {
          .card-number,
          .end-time {
            color: $text-color-auxiliary;
          }
        }
        .seal {
          position: absolute;
          right: 10px;
          bottom: 10px;
          z-index: 10;
        }
      }
    }
  }
}
</style>
